<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../treeTable/layui/css/layui.css">
    <link rel="stylesheet" href="../treeTable/css/demo.css">
    <link rel="stylesheet" href="../static/fourm/css/demo1.css">
    <link rel="stylesheet" href="../static/bootstrap.min.css">
    <script src="../static/jquery.min.js"></script>
    <script src="../static/bootstrap.min.js"></script>
</head>
<body>
<ul class="breadcrumb">
    <li>系统基础管理</li>
    <li class="active">菜单管理</li>
</ul>
<table id="demoTreeTb" ></table>

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="menuedit layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
</script>

<script src="../treeTable/layui/layui.js"></script>
<script>
    layui.config({
        base: '../treeTable/'
    }).use(['treeTable'], function () {
        var $ = layui.jquery;
        var treeTable = layui.treeTable;

        // 渲染表格
        treeTable.render({
            elem: '#demoTreeTb',
            url: '/MS/getmenuinfo',
            toolbar: true,
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'authorityId',
                pidName: 'parentId',
                arrowType: 'arrow2',
                getIcon: 'ew-tree-icon-style2'
            },
            cols: [[
                {type: 'numbers'},
                {type: 'checkbox'},
                {field: 'authorityName', title: '菜单名称', minWidth: 135},
                {field: 'menuUrl', title: '菜单地址',width: 200},
                {field: 'authority', title: '权限标识'},
                {title: '类型', templet: '<p>{{d.isMenu?"菜单":"按钮"}}</p>', align: 'center', width: 60},
                {field: 'createTime', title: '创建时间',width: 160},
                {field: 'isHide', title: '是否隐藏',width:10},
                {align: 'center', toolbar: '#tbBar', title: '操作', width: 130}
            ]],
        });

        //监听工具条
        treeTable.on('tool(demoTreeTb)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                let ismenu=data.isMenu==1?"菜单":"按钮";
                layer.alert("<label>菜单名称</label>" +
                    "<input id='menuName' type='text' class='form-control' value='"+data.authorityName+"' />"+
                    "<label>菜单地址</label>" +
                    "<input id='menuUrl' type='text' class='form-control' value='"+data.menuUrl+"' />"+
                    "<label>权限标识</label>" +
                    "<input id='power' type='text' class='form-control' value='"+data.authority+"' />"+
                    "<label>类型</label>" +
                    "<input id='type' type='text' class='form-control' value='"+ismenu+"' />" +
                    "<label>创建时间</label>" +
                    "<input id='time' type='text' class='form-control' value='"+data.createTime+"' />"+
                    "<label>是否隐藏</label>" +
                    "<input id='isHide' type='text' class='form-control' value='"+data.isHide+"' />",{
                    btn: ['确定','取消'],
                    yes:function(){
                        $.ajax({
                            url:"/MS/menuedit",
                            data:{id:data.authorityId,
                                menuName:$("#menuName").val(),
                                menuUrl:$("#menuUrl").val(),
                                power:$("#power").val(),
                                type:$("#type").val(),
                                time:$("#time").val(),
                                isHide:$("#isHide").val()},
                            success:function(response){
                                if(response!=0){
                                    layer.msg("更新成功");
                                }else{
                                    layer.msg("更新失败，请重新尝试");
                                }
                                setTimeout(function(){
                                    location.reload();
                                },1000);
                            }
                        });
                    }
                });
            }
        });
    });
</script>
<script src="../js/menu.js"></script>
</body>
</html>